<template>
  <div class="page">
    <v-pageTitle title="个人信息"></v-pageTitle>
    
    <el-row type="flex" justify="space-around">
      <el-col :span="11">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <h4>完善信息</h4>
            </el-form-item>
          </el-form>
        </v-pageToolbar>
        <div class="grid-content bg-purple-light">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="userName">
              <el-input size="small" v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input size="small" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input size="small" v-model="ruleForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input size="small" v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="branch">
              <!--<el-input v-model="ruleForm.branch"></el-input>-->
              <el-select size="small" v-model="ruleForm.branch" filterable placeholder="请选择">
                <el-option
                  v-for="item in branch_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位" prop="post">
              <!--<el-input v-model="ruleForm.post"></el-input>-->
              <el-select size="small" v-model="ruleForm.post" filterable placeholder="请选择">
                <el-option
                  v-for="item in post_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="mark">
              <el-input size="small" type="textarea" v-model="ruleForm.mark"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small"  type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button size="small"  @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="11">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <h4>组织机构关系图</h4>
            </el-form-item>
          </el-form>
        </v-pageToolbar>
        <div class="grid-content bg-purple-light">
          <div id="myChart" style="margin-top:20px;"></div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="23">
        <!--工具条-->
        <v-pageToolbar align='left'>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <h4>参与项目</h4>
            </el-form-item>
          </el-form>
        </v-pageToolbar>
        <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
            <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column type="index" label="序号" width="80" align="center">
                </el-table-column>
                <el-table-column v-for="(item,index) in tableData.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
                </el-table-column>
            </el-table>
        </v-pageTable>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
  export default {
    data() {
      // 验证手机号码
      var checkTel = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
          if (!(/^1[34578]\d{9}$/.test(value))) {
            callback(new Error('请填写正确的手机号码格式'));
          } else {
            callback();
          }
        }, 100);
      };
      // 验证邮箱
      var checkEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        setTimeout(() => {
          if (!(/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g.test(value))) {
            callback(new Error('请填写正确的邮箱格式'));
          } else {
            callback();
          }
        }, 100);
      };

      return {
        ruleForm: {
          userName: '',
          name: '',
          tel: '',
          email: '',
          branch: '',
          post: '',
          mark: ''
        },
        branch_options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        post_options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          tel: [
            { required: true, validator: checkTel, trigger: 'blur' }
          ],
          email: [
            { required: true, validator: checkEmail, trigger: 'blur' }
          ],
          branch: [
            { required: true, message: '请选择所属部门', trigger: 'change' }
          ],
          post: [
            { required: true, message: '请选择岗位', trigger: 'change' }
          ],
          mark: [
            { required: false, message: '请填写备注', trigger: 'blur' }
          ]
        },
        tableData: {
            loading: true,
            head: [],
            body: []
        },
        paginationTotal: 100,
        sels:[]
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      drawLine(data){
        // 基于准备好的dom
        var mainContainer = document.getElementById('myChart');
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeMainContainer = function () {
            mainContainer.style.width = window.innerWidth*0.35+'px';
            mainContainer.style.height = window.innerHeight*0.5+'px';
        };
        //设置div容器高宽
        resizeMainContainer();
        // 初始化echarts实例
        var myChart = this.$echarts.init(mainContainer);  
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',

                    data: [data],

                    left: '0%',
                    right: '2%',
                    top: '8%',
                    bottom: '20%',

                    symbol: 'emptyCircle',
                    symbolSize: 20,
                    orient: 'vertical',

                    expandAndCollapse: true,
                    initialTreeDepth: 3,

                    label: {
                        normal: {
                            position: 'left',
                            rotate: 0,
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 14
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'left',
                                rotate: 0,
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 14
                            }
                        }
                    },

                    animationDurationUpdate: 750
                }
            ]
        });
        // 自适应
        window.onresize = function(){
          mainContainer.style.width = window.innerWidth*0.35+'px';
          mainContainer.style.height = window.innerHeight*0.5+'px';
          myChart.resize();
        }
      },
      getTableData(data) {
          // ajax 查询表格数据
          this.tableData.head = [
              {
                  key: 'name',
                  name: '项目名称'
              }
          ]
          this.tableData.body = [
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },
            {
              name: 'XXXXX'
            },{
              name: 'XXXXX'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      sizeChange(val){
        console.log(val)
        this.getTableData()
      },
      pageChange(val){
        console.log(val)
        this.getTableData()
      },
      selsChange: function (sels) {
				this.sels = sels;
			}
    },
    mounted() {
      let data = {
        "name": "经理/总监",
        "children": [
          {
              "name": "主管",
              "children": [
                {
                "name": "组长",
                "children": [
                    {
                    "name": "组员",
                    "children": [
                        {"name": "没有下属员工啦.."},
                      ]
                    }
                  ]
                }
              ]
          } 
        ]
      }
      // 绘制图表
      this.drawLine(data)
      // 获取table数据
      this.getTableData()
    }
  }
</script>